<template>
  <el-row class="operation-panel" type="flex">
    <el-col :span="12" style="text-align: left;">
      <div class="content-right">
        <el-button
          title="运行"
          class="execute"
          type="primary"
          icon="el-icon-caret-right"
          circle
          @click="$emit('executeClick')"
          :disabled="!enableExecuteBtn"
        ></el-button>
      </div>
    </el-col>
    <el-col :span="12" style="text-align: right;">
      <div class="content-left">
        <div v-if="!$store.getters.isLogined">
          <el-button class="login" type="text" @click="login">login</el-button>
        </div>
        <el-dropdown v-else @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar :src="$store.getters.userInfo.avatar_url" :size="35"></el-avatar>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="commands.USER">
                {{ $store.getters.userInfo.name }}
              </el-dropdown-item>
              <el-dropdown-item :command="commands.LOGOUT">logout</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <UserLogin v-if="showUserLogin" @close="showUserLogin = false"></UserLogin>
        <div>
          <el-switch
            class="theme-switch"
            v-model="activedTheme"
            active-color="#fb803a"
            inactive-color="#409EFF"
            active-icon-class="el-icon-moon"
            inactive-icon-class="el-icon-sunny"
            :active-value="THEMES.DARK"
            :inactive-value="THEMES.LIGHT"
            @click="themeChanged"
          ></el-switch>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { THEMES } from '@/utils/constants';
import httpRequest from '@/utils/httpRequest';
import { tMessage } from '@/utils/tLayer';

// components
import UserLogin from '@/components/UserLogin.vue';

export default {
  name: 'OperationPanel',
  props: {
    enableExecuteBtn: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    UserLogin,
  },
  data() {
    return {
      THEMES,
      activedTheme: this.$store.state.currentTheme,
      showUserLogin: false,
      userInfo: this.$store.getters.userInfo,
      commands: {
        USER: 'user',
        LOGOUT: 'logout',
      },
    };
  },
  methods: {
    themeChanged() {
      this.$store.dispatch('themeChanged', this.activedTheme);
    },
    login() {
      this.showUserLogin = true;
    },
    logout() {
      this.$store.dispatch('logout');
      httpRequest.get('user/logout').then((resp) => {
        if (resp.data.code === 0) {
          tMessage.success('已退出登录!');
        }
      });
    },
    handleCommand(command) {
      const cmd = this.commands;
      switch (command) {
        case cmd.USER:
          break;
        case cmd.LOGOUT:
          this.logout();
          break;
        default:
      }
    },
  },
};
</script>

<style>
.operation-panel {
  padding: 4px 5px;
  font-size: 18px;
}

.content-right {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.execute {
  font-size: 18px;
}

.content-left {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.content-left > div {
  display: inline-block;
  margin-left: 5px;
}

.login,
.theme-switch {
  font-size: 18px;
}

.user-info {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  font-size: 14px;
  color: #909399;
}

.user-info:hover {
  cursor: pointer;
}
</style>
